<template>
  <el-dialog
    :visible.sync="isVisible"
    :title="addFundDialog.title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    @close="closeDialog"
  >
    <div class="form">
      <el-form
        ref="form"
        :model="form"
        :rules="form_rules"
        :label-width="dialog.formLabelWidth"
        style="margin:10px;width:auto;"
      >
        <el-form-item prop="adminName" label="账号:">
          <el-input v-model="form.adminName" type="text" />
        </el-form-item>
        <el-form-item prop="adminPassword" label="密码:">
          <el-input v-model="form.adminPassword" type="text" />
        </el-form-item>
        <el-form-item prop="phone" label="手机号:">
          <el-input v-model="form.phone" type="text" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱:">
          <el-input v-model="form.Email" type="text" />
        </el-form-item>
        <el-form-item prop="name" label="姓名:">
          <el-input v-model="form.name" type="text" />
        </el-form-item>
        <el-form-item prop="power" label="角色:">
          <el-input v-model.number="form.power" type="text" />
        </el-form-item>
        <el-form-item prop="status" label="状态:">
          <el-input v-model.number="form.status" type="text" />
        </el-form-item>
        <el-form-item class="text_right">
          <el-button @click="isVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit(&quot;form&quot;)">提  交</el-button>
        </el-form-item>

      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { addMoney, updateMoney } from '@/api/money'
import AreaJson from '@/assets/datas/area.json'
import axios from 'axios'
import { getUserControls, updataUserControls } from '@/api/usersControl'
export default {
  name: 'AddFundDialogs',
  props: {
    isShow: Boolean,
    dialogRow: Object
  },
  data() {
    const validateData = (rule, value, callback) => {
      // if (value === "") {
      //   let text;
      //   if (rule.field == "adminPassword") {
      //     text = "收入";
      //   } else if (rule.field == "pay") {
      //     text = "支出";
      //   } else if (rule.field == "accoutCash") {
      //     text = "账户现金";
      //   }
      //   callback(new Error(text + "不能为空~"));
      // } else {
      //   let numReg = /^[0-9]+.?[0-9]*$/;
      //   if (!numReg.test(value)) {
      //     callback(new Error("请输入正数值"));
      //   } else {
      //     callback();
      //   }
      // }
    }
    return {
      areaData: [],
      isVisible: this.isShow,
      form: {
        incomePayType: '',
        address: [],
        tableAddress: '',

        adminName: '',
        adminPassword: '',
        phone: '',
        email: '',
        name: '',
        power: '',
        status: ''
      },
      // 详情弹框信息
      dialog: {
        width: '400px',
        formLabelWidth: '120px'
      }
    }
  },
  computed: {
    ...mapGetters(['addFundDialog'])
  },
  created() {
    this.areaData = AreaJson
  },
  mounted() {
    if (this.addFundDialog.type === 'edit') {
      this.form = this.dialogRow
      console.log(this.form, '修改')
    } else {
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
      })
    }
  },
  methods: {
    getCascaderObj(val, opt) {
      return val.map(function(value, index, array) {
        for (var item of opt) {
          if (item.value == value) {
            opt = item.children
            return item.label
          }
        }
        return null
      })
    },
    handleChange(value) {
      console.log([...value]) // ["120000", "120200", "120223"]
      this.form.address = [...value]
      const vals = this.getCascaderObj([...value], this.areaData) // arr
      this.form.tableAddress = vals.join(',').replace(/,/g, '')
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    // 表单提交
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          // 表单数据验证完成之后，提交数据;
          const formData = this[form]
          const para = Object.assign({}, formData)
          if (this.addFundDialog.type === 'edit') {
            this.form = this.dialogRow
            console.log(this.form._id)
            updataUserControls(
              this.form._id,
              this.form.adminName,
              this.form.adminPassword,
              this.form.phone,
              this.form.Email,
              this.form.name,
              this.form.power,
              this.form.status,
            ).then(res => {
              console.log('修改')
            })
          } else {
            axios({
              method: 'post',
              url: '/api/usersControl/create/',
              data: {
                adminName: para.adminName,
                adminPassword: para.adminPassword,
                phone: para.phone,
                Email: para.email,
                name: para.name,
                power: para.power,
                status: para.status
              }
            }).then(res => {
              console.log('添加')
            })
          }

          // edit
          if (this.addFundDialog.type === 'edit') {
            updateMoney(para).then(res => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$refs['form'].resetFields()
              this.isVisible = false
              this.$emit('getFundList')
            })
          } else {
            // add
            addMoney(para).then(res => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$refs['form'].resetFields()
              this.isVisible = false
              this.$emit('getFundList')
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search_container {
  margin-bottom: 20px;
}
.btnRight {
  float: right;
  margin-right: 0px !important;
}
.searchArea {
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  padding: 18px 18px 0;
}
</style>
